﻿<html>
	<head>
		<style>
			*{margin:0;padding:0}
			#header{
				margin:0 auto;
				width:446px;
				height:110px;
				background:url('title.png') no-repeat;
			}
			#content{
				width:1024px;
				height:500px;
				background:url('jiqi.png') no-repeat;
				background-position:50% 50%;
				position:relative;
			}
			#content #scroll1,#content #scroll2,#content #scroll3{
				width:58px;
				height:90px;
				position:absolute;
			}
			#content #scroll1{
				left:410px;
				top:212px;
				overflow:hidden;
				
			}
			#content #scroll2{
				left:476px;
				top:212px;
				overflow:hidden;
			}
			#content #scroll3{
				left:542px;
				top:212px;
				overflow:hidden;
			}
			ul{
				list-style:none;
			}
			
			ul img{
				width:58px;
				height:90px;
				
			}
			#content #fl_img{
				position:absolute;
				z-index:3;
				width:58px;
				height:90px;
			}
			#content #yaogan{
				width:50px;
				height:120px;
				
				position:absolute;
				left:620px;
				top:180px;
			}
			#content #yaogan button{
				width:50px;
				height:120px;
				background:url('yaogan1.png') no-repeat;
				border:none;
				background-size:100% 100%;
			}
		</style>
	</head>
	<body>
		<div id="header">
		</div>
		<div id="content">
			<div id="scroll1">
				<ul id="scroll1_ul">
				   <li><img src="p01.jpg"/></li>
				   <li><img src="p02.jpg"/></li>
				   <li><img src="p03.jpg"/></li>
				   <li><img src="p04.jpg"/></li>
				   <li><img src="p05.jpg"/></li>
				   <li><img src="p06.jpg"/></li>
				   <li><img src="p07.jpg"/></li>
				   <li><img src="p08.jpg"/></li>
				   <li><img src="p09.jpg"/></li>
				   <li><img src="p01.jpg"/></li>
				</ul>
				<img src="panel.png" id="fl_img"/>
			</div>
			<div id="scroll2">
				<ul id="scroll2_ul">
				   <li><img src="p01.jpg"/></li>
				   <li><img src="p02.jpg"/></li>
				   <li><img src="p03.jpg"/></li>
				   <li><img src="p04.jpg"/></li>
				   <li><img src="p05.jpg"/></li>
				   <li><img src="p06.jpg"/></li>
				   <li><img src="p07.jpg"/></li>
				   <li><img src="p08.jpg"/></li>
				   <li><img src="p09.jpg"/></li>
				   <li><img src="p01.jpg"/></li>
				</ul>
				<img src="panel.png" id="fl_img"/>
			</div>
			<div id="scroll3">
				<ul id="scroll3_ul">
				   <li><img src="p01.jpg"/></li>
				   <li><img src="p02.jpg"/></li>
				   <li><img src="p03.jpg"/></li>
				   <li><img src="p04.jpg"/></li>
				   <li><img src="p05.jpg"/></li>
				   <li><img src="p06.jpg"/></li>
				   <li><img src="p07.jpg"/></li>
				   <li><img src="p08.jpg"/></li>
				   <li><img src="p09.jpg"/></li>
				   <li><img src="p01.jpg"/></li>
				</ul>
				<img src="panel.png" id="fl_img"/>
			</div>
			<div id="yaogan">
				<button type="button" id="mybu" onclick="action()"></button>			
				</div>
		</div>
	</body>
	<script type="text/javascript">
		var pos1=0;
		var pos2=0;
		var pos3=0;
		var m;
		function action(){
			setTimeout("xiugai()",200);
		}
		function xiugai(){
			document.getElementById("mybu").style.backgroundImage="url(yaogan2.png)";
			setTimeout("huifu()",200);
			m1=setInterval("dong1()",Math.floor(Math.random()*15+1));
			m2=setInterval("dong2()",Math.floor(Math.random()*15+1));
			m3=setInterval("dong3()",Math.floor(Math.random()*15+1));
			setTimeout("ting()",1000+Math.random()*2000);
}
		function dong1(){
			pos1=pos1-Math.random()*8;
			document.getElementById("scroll1_ul").style.marginTop=pos1+"px";
			if(pos1<-900)
			{
				pos1=0;
			}
}
		function dong2(){
			pos2=pos2-Math.random()*8;
			document.getElementById("scroll2_ul").style.marginTop=pos2+"px";
			if(pos2<-900)
			{
				pos2=0;
			}
}
		function dong3(){
			pos3=pos3-Math.random()*8;
			document.getElementById("scroll3_ul").style.marginTop=pos3+"px";
			if(pos3<-900)
			{
				pos3=0;
			}
}
		function ting(){
			clearInterval(m1);
			clearInterval(m2);
			clearInterval(m3);
			pos1=Math.round(pos1);
			pos2=Math.round(pos2);
			pos3=Math.round(pos3);
			if(pos1==pos2){
					if(pos2==pos3){
						alert("有三个图片重复");
					}else{
						alert("有两个图片重复");
					}
				}else{
					if(pos2==pos3||pos1==pos3){
						alert("有两个图片重复");
					}else{
						alert("图片不重复");
					}
				}
				}
		function huifu(){
			var i=document.getElementById("mybu");
			i.style.backgroundImage="url(yaogan1.png)";
}
	</script>
	
</html>